<template>
  <div class='home'>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img v-lazy="image" :style="{width: '375px', height: '239px'}"/>
      </van-swipe-item>
    </van-swipe>
    <!-- 搜索框 -->
    <div class="searchBox">
      <van-search v-model="value" placeholder="搜索医生，科室等" />
      <i class="iconfont">&#xe61a;</i>
    </div>
    <!-- 挂号区域 -->
    <div class="register">
      <div class="orderRegister">
        <img src="https://i.loli.net/2021/11/25/FDH5CNL2VmMOEbI.png">
        <span>预约挂号</span>
      </div>
      <div class="rightRegister">
        <div class="todayRegister">
          <span>当日挂号</span>
          <img src="https://i.loli.net/2021/11/25/CyeTwxi2cORlXdn.png">
        </div>
        <div class="getRegister">
          <span>预约取号</span>
          <img src="https://i.loli.net/2021/11/25/EsyPfvcteKGUXTa.png">
        </div>
      </div>
    </div>
      <!-- 导航轮播图 -->
    <van-swipe class="my-swipe rotation" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <van-grid square :gutter="0">
          <van-grid-item v-for="value in navImg1" :key="value.title" :icon="value.imgUrl" :text="value.title" />
        </van-grid>
      </van-swipe-item>
      <van-swipe-item>
        <van-grid square :gutter="0">
          <van-grid-item v-for="value in navImg2" :key="value.title" :icon="value.imgUrl" :text="value.title" />
        </van-grid>
      </van-swipe-item>
    </van-swipe>
    <!-- 科室导航  医院介绍-->
    <div class="dpaDoc">
       <div class="dpaNav">
      <span>科室导航</span>
      <img src="https://i.loli.net/2021/11/25/cOmIzUJMHb5ZLER.png">
    </div>
    <div class="docInt">
      <span>医院介绍</span>
      <img src="https://i.loli.net/2021/11/25/ouatVrdT2SZJbIp.png">
    </div>
    </div>
    <!-- 健康百科 -->
    <div class="heaEnc">
      <div class="topNav">
        <h3>健康百科</h3>
        <span>更多</span>
      </div>
      <ul>
        <li>
          <img src="https://i.loli.net/2021/11/25/5JnYQDTdaPcgEXy.png">
          <span>冠心病和高血压的相爱相杀</span>
        </li>
        <li>
          <img src="https://i.loli.net/2021/11/25/JrKTyDCnbXNfBjs.png">
          <span>你的腰老了，并不仅仅是因为久坐，站着也有错！</span>
        </li>
         <li>
          <img src="https://i.loli.net/2021/11/25/puNhcmLH94UtiOq.png">
          <span>“腹愁者”，直接切胃行不行</span>
        </li>
         <li>
          <img src="https://i.loli.net/2021/11/25/urJHE5Te3txWPfR.png">
          <span>不要让孩子的身高输在青春期！</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data() {
    return {
      value: '',
      images: [
        'https://i.loli.net/2021/11/25/DpdrVNtzwqCgLu3.png',
        'https://i.loli.net/2021/11/25/SxrjuAZeXz5ioHb.png',
        'https://i.loli.net/2021/11/25/LN3CMHz2WcBsUAp.png',
        'https://i.loli.net/2021/11/25/Q3GO5A7yS9jpzHw.png',
      ],
      navImg1: [
        {
          imgUrl: 'https://i.loli.net/2021/11/25/KpUx7MLPsCgZVBw.png',
          title: '注册建档',
        },
        {
          imgUrl: 'https://i.loli.net/2021/11/25/83UOiIwdBMxK6NL.png',
          title: '自助缴费',
        },
        {
          imgUrl: 'https://i.loli.net/2021/11/25/K4xCsvE67gA9Xq3.png',
          title: '去报告单',
        },
        {
          imgUrl: 'https://i.loli.net/2021/11/25/dAGaxgT8rOLBKuz.png',
          title: '智能导诊',
        },
        {
          imgUrl: 'https://i.loli.net/2021/11/25/RwqutCIKfiXlOZh.png',
          title: '候诊查询',
        },
        {
          imgUrl: 'https://i.loli.net/2021/11/25/Viq5dKOQfPCWA1b.png',
          title: '专病专科',
        },
        {
          imgUrl: 'https://i.loli.net/2021/11/25/f5Clp2D46PcuoRL.png',
          title: '检查预约',
        },
        {
          imgUrl: 'https://i.loli.net/2021/11/25/KuRmGOaA9WB2ZjQ.png',
          title: '检验预约',
        },
      ],
      navImg2: [
        {
          imgUrl: 'https://i.loli.net/2021/11/25/iQscnzRrZ5GWYhv.png',
          title: '门诊报道',
        },
        {
          imgUrl: 'https://i.loli.net/2021/11/25/Taq6KIQ9hUpVY8b.png',
          title: '出诊信息',
        },
        {
          imgUrl: 'https://i.loli.net/2021/11/25/Taq6KIQ9hUpVY8b.png',
          title: '处方查询',
        },
        {
          imgUrl: 'https://i.loli.net/2021/11/25/UWarMx4ihmpIveF.png',
          title: '住院查询',
        },
        {
          imgUrl: 'https://i.loli.net/2021/11/25/diIvnxFLo4EhYkK.png',
          title: '线上咨询',
        },
        {
          imgUrl: 'https://i.loli.net/2021/11/25/PxZg46EWG28H1rc.png',
          title: '就诊指南',
        },
        {
          imgUrl: 'https://i.loli.net/2021/11/25/Pe3dKXTZchm8VJn.png',
          title: '体检中心',
        },
        {
          imgUrl: 'https://i.loli.net/2021/11/25/o1YwIfQitnKreN8.png',
          title: '手术查询',
        },
      ],
    }
  },
}
</script>

<style lang='less' scoped>
  @font-face {
    font-family: 'iconfont';  /* Project id 2965756 */
    src: url('//at.alicdn.com/t/font_2965756_ns9r9du091m.woff2?t=1637830137054') format('woff2'),
        url('//at.alicdn.com/t/font_2965756_ns9r9du091m.woff?t=1637830137054') format('woff'),
        url('//at.alicdn.com/t/font_2965756_ns9r9du091m.ttf?t=1637830137054') format('truetype');
  }
  .iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
  .home{
    position: relative;
    background-color: #F2F2F2;
  }
  .searchBox{
    position: absolute;
    top: 100px;
    left: 40px;
    width: 452px;
    height: 60px;
    .van-search{
      //  --van-search-padding: 0
      padding: 0;
    }
    i{
      font-size: 24px;
      color: white;
      position: absolute;
      top: 10px;
      left: 470px;
    }
  }
  .register{
    width: 100%;
    height: 298px;
    margin: 17px 0 17px 0;
    .orderRegister{
      width: 347px;
      height: 100%;
      float: left;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      img{
        width: 100px;
        height: 100px;
        margin: 0 0 15px 0;
      }
      span{
        color: #333333;
        font-size: 14px;
      }
    }
    .rightRegister{
      width: 402px;
      height: 100%;
      float: right;
      .todayRegister,.getRegister{
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        span{
          color: #333333;
          font-size: 14px;
        }
      }
      .todayRegister{
        margin-bottom: 1px;
      }
      .todayRegister>img{
        width: 70px;
        height: 78px;
        margin: 0 0  0 20px;
      }
      .getRegister>img{
        width: 48px;
        height: 80px;
        margin: 0 0  0 20px;
      }
    }
  }
  .rotation{
    width: 100%;
    height: 395px;
    // .van-icon {
    //   img{
    //     width: 50px;
    //     height: 50px;
    //   }
    // }
  }
  .dpaDoc{
    width: 100%;
    height: 172px;
    margin-bottom: 20px;
    .dpaNav,.docInt{
      width: 49.8%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      float: left;
      background-color: #fff;
      span{
        font-size: 16px;
        color: #333333;
      }
      img{
        margin-left: 90px;
      }
    }
    .dpaNav{
      margin-right: 2px;
    }
  }
  .heaEnc{
    width: 100%;
    height: auto;
    .topNav{
      width: 100%;
      height: 140px;
      background-color: #fff;
      h3{
        height: 100%;
        float: left;
        margin: 0;
        font-size: 16px;
        color: #333333;
        font-weight: 400;
        font-style: normal;
        line-height: 140px;
      }
      span{
        line-height: 140px;
        float: right;
        padding-right: 30px;
        background: url('https://i.loli.net/2021/11/25/jQeki82v7BDtwd1.jpg') no-repeat right center;
      }
    }
    ul li img{
      width: 240px;
      height: 136px;
    }
    ul li span{
      font-size: 14px;
      color: #333333;
      vertical-align: top;
    }
  }
</style>
